<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Congratulations</title>
    <link rel="shortcut icon" href="favicon.png" type="image/x-icon">
    <style>
        body {
            height: 100vh;
            margin: 0;
            overflow: hidden;
        }

        #app {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        h2 {
            cursor: pointer;
            margin-top: -5vh;
        }
    </style>
    <!-- 引入 Vue 3.3.4 -->
    <script src="./js/vue.global.prod.min.js"></script>
    <!-- 引入碎纸屑特效插件 -->
    <!-- JavaScript 五彩纸屑库 js-confetti 参考链接：https://juejin.cn/post/7208092574162305082 -->
    <script src="./js/js-confetti.browser.js"></script>
</head>

<body>
    <div id="app">
        <h2 @click.stop="showConfetti">🎉 恭喜恭喜!</h2>
    </div>
    <script>
        const { createApp } = Vue
        createApp({
            setup() {
                // 特效插件使用说明：https://www.npmjs.com/package/js-confetti
                const confetti = new JSConfetti()
                function showConfetti() {
                    confetti.addConfetti()
                }
                showConfetti()

                document.querySelector('body').addEventListener('click', () => {
                    confetti.addConfetti({
                        emojis: ['🌈', '⚡️', '💥', '✨', '💫', '🌸'],
                        emojiSize: 50,
                    })
                })

                // 需要return出去
                return {
                    showConfetti
                }
            }
        }).mount('#app')
    </script>
</body>

</html>